<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>腾色智能监控系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 0.12rem;
        }

        .app {
            display: block;
            margin: 0 auto;
            padding: 0.1rem;
            max-width: 414px;
        }

        .images {
            border-radius: 0.1rem;
            display: block;
            overflow: hidden;
        }

        .images>a {
            display: block;
        }

        .images img {
            width: 100%;
            display: block;
        }

        .state {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.2rem;
            flex-wrap: wrap;
        }

        .state .main {
            width: 1.97rem;
            height: 2rem;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="state">
            <div class="main LineChart"></div>
            <div class="main BarChart"></div>
            <div class="main PieChart"></div>
            <div class="main PieChart2"></div>
        </div>
    </div>
</body>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<script>

    // 指定图表的配置项和数据
    var Linedata = [820, 932, 901, 934, 1290, 1330, 1320]
    var Bardata = [5, 20, 36, 10, 10, 20]
    var Piedata = [
        { value: 8, name: '地块1' },
        { value: 7, name: '地块2' },
        { value: 9, name: '地块3' },
    ]
    var Piedata2 = [
        { value: 335, name: '在线设备' },
        { value: 310, name: '离线设备' },
    ]

    function createLineChart(Linedata = []) {
        var option = {
            title: { text: '' },
            grid: { top: "20%", bottom: "20%", x: "15%", },
            tooltip: {},
            legend: {
                left: 'right', textStyle: { fontSize: 10 },
                data: ['土壤水份'], itemWidth: 10, itemHeight: 8,
            },
            xAxis: {
                type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: { inside: false, textStyle: { color: '#000', fontSize: '9', itemSize: '' } },
            },
            yAxis: { type: 'value', axisLabel: { inside: false, textStyle: { color: '#000', fontSize: '10', itemSize: '' } }, },
            series: [
                {
                    name: "土壤水份",
                    data: Linedata,
                    type: 'line'
                }
            ]
        };
        return option
    }
    function creatBarChart(Bardata = []) {
        var option = {
            title: { text: '' },
            grid: { top: "20%", bottom: "20%", x: "15%", },
            tooltip: {},
            legend: {
                left: 'right', textStyle: { fontSize: 10 },
                data: ['土壤水份'], itemWidth: 10, itemHeight: 8,
            },
            xAxis: {
                data: ["设备1", "设备2", "设备3", "设备4", "设备5", "设备6"],
                axisLabel: { inside: false, textStyle: { color: '#000', fontSize: '9', itemSize: '' } },
            },
            yAxis: { axisLabel: { inside: false, textStyle: { color: '#000', fontSize: '10', itemSize: '' } }, },
            series: [
                {
                    name: '土壤水份',
                    type: 'bar',
                    data: Bardata,
                },
            ]
        };
        return option
    }
    function createPieChart(Piedata = []) {
        var option = {
            title: { text: '' },
            grid: { top: "20%", bottom: "20%", x: "15%", },
            tooltip: {},
            legend: {
                left: 'right', textStyle: { fontSize: 10 },
                itemWidth: 10, itemHeight: 8, orient: 'vertical', top: 'top', data: ['地块1', '地块2', '地块3']
            },
            series: [
                {
                    name: '半径模式',
                    type: 'pie',
                    radius: "70%",
                    center: ['45%', '50%'],
                    roseType: 'radius',
                    label: { show: true, position: "inner" },
                    emphasis: { label: { show: false } },
                    data: Piedata
                },
            ]
        };
        return option
    }
    function createPieChart2(Piedata2 = []) {
        var option = {
            tooltip: { trigger: 'item', formatter: '{a}<br/>{b}:{c}({d}%)' },
            legend: { left: 'right', textStyle: { fontSize: 9 }, itemWidth: 10, itemHeight: 8, orient: 'vertical', top: 'top', data: ['在线设备', '离线设备'] },
            series: [
                {
                    name: '数据来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: { show: false, position: 'center' },
                    emphasis: {
                        label: { show: true, fontSize: '30', fontWeight: 'bold' }
                    },
                    labelLine: { show: false },
                    data: Piedata2
                }
            ]
        };
        return option
    }



    // var data = [];
    // for (var i = 0; i <= 360; i++) { var t = i / 180 * Math.PI; var r = Math.sin(2 * t) * Math.cos(2 * t); data.push([r, i]); }
    !(function (win, doc) {
        function setFontSize() {
            var winWidth = window.innerWidth; if (winWidth >= 414) { doc.documentElement.style.fontSize = 100 + "px" }
            doc.documentElement.style.fontSize = (winWidth / 414) * 100 + 'px';
        }
        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
        var timer = null; win.addEventListener(evt, function () { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); win.addEventListener("pageshow", function (e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false);//初始化
        setFontSize();
    }(window, document));
    // 基于准备好的dom，初始化echarts实例
    var LineChart = echarts.init(document.getElementsByClassName('LineChart')[0]);
    var BarChart = echarts.init(document.getElementsByClassName('BarChart')[0]);
    var PieChart = echarts.init(document.getElementsByClassName('PieChart')[0]);
    var PieChart2 = echarts.init(document.getElementsByClassName('PieChart2')[0]);
    LineChart.setOption(createLineChart(Linedata));
    BarChart.setOption(creatBarChart(Bardata));
    PieChart.setOption(createPieChart(Piedata));
    PieChart2.setOption(createPieChart2(Piedata2));
</script>

</html>